<template>
  <view class="container">
    <Card class="goal-card">
      <view class="goal-header">
        <text class="goal-title">{{ goal.title }}</text>
        <view class="goal-status" :class="goal.statusClass">
          {{ goal.status }}
        </view>
      </view>
      
      <view class="goal-info">
        <view class="info-item">
          <text class="label">关联学生：</text>
          <text class="value">{{ goal.student }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">时间范围：</text>
          <text class="value">{{ goal.timeRange }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">创建时间：</text>
          <text class="value">{{ goal.createTime }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">最后更新：</text>
          <text class="value">{{ goal.updateTime }}</text>
        </view>
      </view>
      
      <!-- 子目标列表 -->
      <view class="subgoals-section" v-if="goal.subGoals && goal.subGoals.length > 0">
        <text class="subgoals-title">子目标（{{ goal.subGoals.length }}）</text>
        <view class="subgoals-list">
          <view 
            v-for="(subGoal, index) in goal.subGoals" 
            :key="subGoal.id || index" 
            class="subgoal-item"
          >
            <view class="subgoal-header">
              <text class="subgoal-name">{{ subGoal.name }}</text>
              <view class="subgoal-status" :class="subGoal.statusClass">
                {{ subGoal.status }}
              </view>
            </view>
            
            <view class="subgoal-info">
              <view class="subinfo-item">
                <text class="sublabel">时间范围：</text>
                <text class="subvalue">{{ subGoal.timeRange }}</text>
              </view>
              
              <view class="subinfo-item">
                <text class="sublabel">进度：</text>
                <text class="subvalue">{{ subGoal.progress }}%</text>
              </view>
              
              <view class="subinfo-item">
                <text class="sublabel">关联计划：</text>
                <text class="subvalue">{{ subGoal.planCount || 0 }}个</text>
              </view>
            </view>
            
            <view class="subgoal-progress-bar">
              <view class="subprogress-fill" :style="{ width: subGoal.progress + '%' }"></view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 无子目标提示 -->
      <view class="no-subgoals" v-else>
        <text>暂无子目标</text>
      </view>
    </Card>
    
    <Card class="chart-card">
      <view class="card-header">
        <text class="card-title">成绩变化趋势</text>
        <Button class="view-detail-btn" type="info" size="small" text="查看详情" @click="goToScoreDetail" />
      </view>
      
      <!-- 使用qiun-data-charts组件 -->
      <qiun-data-charts 
        v-if="chartHasData"
        type="line" 
        :chartData="chartData" 
        :opts="chartOptions"
        canvasId="scoreChart"
        width="750rpx"
        height="400rpx"
      />
      <view v-else class="chart-empty">暂无成绩数据</view>
    </Card>
    
    <Card class="subjects-card">
      <view class="card-header">
        <text class="card-title">科目目标分数</text>
        <view class="buttons-group">
          <Button class="edit-btn" type="info" size="small" text="编辑" @click="goToEdit" />
          <Button class="edit-btn" type="info" size="small" text="录入成绩" @click="goToAddScore" />
        </view>
      </view>
      
      <view class="subjects-list">
        <view 
          v-for="(subject, index) in goal.subjects" 
          :key="index" 
          class="subject-item"
        >
          <view class="subject-info">
            <text class="subject-name">{{ subject.name }}</text>
            <text class="subject-score">目标：{{ subject.targetScore }}分</text>
          </view>
          
          <view class="score-chart">
            <view class="chart-bar" :style="{ width: subject.progress + '%' }"></view>
          </view>
          
          <view class="subject-progress">
            <text class="current-score">当前：{{ subject.currentScore }}分</text>
            <text class="progress-text">{{ subject.progress }}%</text>
          </view>
        </view>
      </view>
    </Card>
    
    <Card class="description-card">
      <view class="card-header">
        <text class="card-title">目标描述</text>
      </view>
      <text class="description">{{ goal.description || '暂无描述' }}</text>
    </Card>
    
    <!-- 关联计划列表 -->
    <Card class="plans-card">
      <view class="card-header">
        <text class="card-title">关联学习计划</text>
        <Button class="add-btn" type="primary" size="small" text="添加计划" @click="goToCreatePlan" />
      </view>
      
      <view class="plans-list" v-if="plans.length > 0">
        <view 
          v-for="plan in plans" 
          :key="plan.id" 
          class="plan-item" 
          @click="goToPlanDetail(plan.id)"
        >
          <view class="plan-info">
            <text class="plan-name">{{ plan.name }}</text>
            <text class="plan-status" :class="plan.statusClass">{{ plan.status }}</text>
          </view>
          
          <view class="plan-meta">
            <text class="plan-time">{{ plan.timeRange }}</text>
            <text class="plan-progress">进度：{{ plan.progress }}%</text>
          </view>
          
          <view class="plan-progress-bar">
            <view class="progress-fill" :style="{ width: plan.progress + '%' }"></view>
          </view>
        </view>
      </view>
      
      <view v-else class="empty-plans">
        <text>暂无关联学习计划</text>
      </view>
    </Card>
    
    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <!-- 制定计划按钮 -->
      <Button class="primary-btn" type="primary" text="+ 制定计划" @click="goToCreatePlan" />
      
      <!-- 辅助功能按钮组 -->
      <view class="secondary-actions">
        <Button class="secondary-btn" type="default" text="查看所有计划" @click="goToPlanList" />
        <Button class="secondary-btn" type="default" text="添加学习成绩" @click="goToAddScore" />
      </view>
      
      <!-- 确认目标达成按钮 -->
      <Button class="success-btn" type="success" text="确认目标达成" @click="confirmGoalCompletion" />
      
      <!-- 删除目标按钮 -->
      <Button class="delete-btn" type="error" text="删除目标" @click="handleDelete" />
    </view>
  </view>
</template>

<script>
// 导入qiun-data-charts组件
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import { services } from '../../api/index.js';
const goalAPI = services.goal;

export default {
  components: { qiunDataCharts },
  data() {
    return {
      goalId: '',
      goal: {
        id: '',
        title: '',
        student: '-',
        timeRange: '',
        createTime: '',
        updateTime: '',
        status: '',
        statusClass: '',
        description: '',
        // 子目标列表（对接后端后以 computed 形式映射）
        subGoals: []
      },
      plans: [],
      chartData: { categories: [], series: [] },
      chartOptions: {
        color: ['#007AFF', '#34C759', '#FF9500'],
        padding: [10, 10, 30, 0],
        legend: { position: 'top', float: 'right', fontSize: 12 },
        xAxis: { gridType: 'dash', dashLength: 4 },
        yAxis: { gridType: 'dash', dashLength: 4, min: 0, max: 100, splitNumber: 5 },
        extra: { line: { type: 'curve', width: 2, dot: true, dotSize: 6, activeType: 'hollow', smooth: true, smoothMonotone: 'x' } }
      }
    };
  },
  async onLoad(options) {
    this.goalId = options?.id || '';
    if (this.goalId) {
      await this.fetchGoalDetail();
    }
  },
  computed: {
    displaySubGoals() {
      const list = this.goal?.subGoals || [];
      return list.map(sg => ({
        id: sg.id,
        name: sg.description || '-',
        timeRange: `${this.startTime || ''} - ${this.deadline || ''}`,
        progress: Number(sg.completionRate || 0),
        planCount: Number(sg.planCount || 0),
        status: sg.status,
        statusClass: sg.statusClass
      }));
    },
    chartHasData() {
      const series = this.chartData?.series || [];
      return Array.isArray(series) && series.some(s => Array.isArray(s.data) && s.data.length > 0);
    }
  },
  
  methods: {
    async fetchGoalDetail() {
      try {
        uni.showLoading({ title: '加载中...' });
        const resp = await goalAPI.getGoalDetail(this.goalId);
        const data = resp?.data || resp || {};
        const mapStatus = s => s === 'PENDING' ? '未开始' : (s === 'IN_PROGRESS' ? '进行中' : (s === 'COMPLETED' ? '已完成' : (s || '-')));
        const mapClass = s => s === 'PENDING' ? 'status-pending' : (s === 'IN_PROGRESS' ? 'status-progress' : (s === 'COMPLETED' ? 'status-completed' : ''));
        const subGoals = Array.isArray(data.subGoals) ? data.subGoals : [];
        this.goal = {
          id: data.id || '',
          title: data.title || '',
          student: '-',
          timeRange: `${data.startTime || ''} - ${data.deadline || ''}`,
          createTime: '',
          updateTime: '',
          status: mapStatus(data.status),
          statusClass: mapClass(data.status),
          description: data.description || '',
          subGoals: subGoals.map(sg => ({
            id: sg.id,
            description: sg.description || '',
            completionRate: Number(sg.completionRate ?? 0),
            planCount: Number(sg.planCount ?? 0),
            status: mapStatus(sg.status),
            statusClass: mapClass(sg.status)
          }))
        };
        // 图表数据此处暂无接口，保持空或使用占位
      } catch (e) {
        uni.hideLoading();
        uni.showToast({ title: '加载失败', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },
    goToEdit() {
      uni.navigateTo({
        url: '/pages/goal/edit-learning?id=' + this.goal.id
      });
    },
    goToAddScore() {
      uni.navigateTo({
        url: '/pages/goal/add-score?id=' + this.goal.id
      });
    },
    // 跳转到创建计划页面
    goToCreatePlan() {
      uni.navigateTo({
        url: '/pages/plan/create?goalId=' + this.goal.id
      });
    },
    // 跳转到计划列表页面
    goToPlanList() {
      uni.navigateTo({
        url: '/pages/plan/list?goalId=' + this.goal.id
      });
    },
    // 跳转到计划详情页面
    goToPlanDetail(planId) {
      uni.navigateTo({
        url: '/pages/plan/detail?id=' + planId
      });
    },
    
    // 跳转到成绩详情页面
    goToScoreDetail() {
      uni.navigateTo({
        url: '/pages/goal/score-detail?goalId=' + this.goal.id
      });
    },
    
    // 确认目标达成
    confirmGoalCompletion() {
      uni.showModal({
        title: '确认目标达成',
        content: '确定这个学习目标已经达成了吗？确认后将无法撤销。',
        success: (res) => {
          if (res.confirm) {
            // 这里可以添加确认目标达成的逻辑
            uni.showToast({
              title: '目标已标记为达成',
              icon: 'success'
            });
          }
        }
      });
    },
    
    handleDelete() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个学习目标吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            
            // 返回目标列表
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 全局样式变量 */
$primary-color: #3366FF;
$secondary-color: #66CCFF;
$accent-color: #FF6666;
$success-color: #33CC99;
$warning-color: #FFCC33;
$danger-color: #FF6666;
$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;
$background-color: #F5F7FA;
$card-background: #FFFFFF;
$border-color: #EEEEEE;
$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-base: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 40rpx;
$font-size-xs: 24rpx;
$font-size-sm: 28rpx;
$font-size-base: 32rpx;
$font-size-lg: 36rpx;
$font-size-xl: 40rpx;
$border-radius-sm: 8rpx;
$border-radius-base: 12rpx;
$border-radius-lg: 16rpx;
$shadow-light: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
$shadow-medium: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
$shadow-heavy: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);

.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* 目标信息卡片样式 */
.goal-card {
  margin-bottom: $spacing-base;
  width: 100%;
  box-sizing: border-box;
  background-color: $card-background;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-light;
  transition: all 0.3s ease;
}

.goal-card:active {
  transform: scale(0.98);
  box-shadow: $shadow-heavy;
}

.goal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-lg;
  width: 100%;
  box-sizing: border-box;
}

.goal-title {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0; // 防止Flexbox中文字溢出
}

.goal-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-progress {
  background-color: rgba($primary-color, 0.1);
  color: $primary-color;
}

/* 基本信息样式 */
.goal-info {
  font-size: $font-size-sm;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: $spacing-base;
}

/* 子目标部分样式 */
.subgoals-section {
  width: 100%;
  box-sizing: border-box;
  margin-top: $spacing-base;
  padding-top: $spacing-base;
  border-top: 1rpx solid $border-color;
}

.subgoals-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  margin-bottom: $spacing-sm;
  display: block;
}

.subgoals-list {
  width: 100%;
  box-sizing: border-box;
}

.subgoal-item {
  background-color: rgba($background-color, 0.7);
  border-radius: $border-radius-base;
  padding: $spacing-base;
  margin-bottom: $spacing-sm;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.subgoal-item:active {
  background-color: $background-color;
  transform: scale(0.98);
}

.subgoal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
  width: 100%;
  box-sizing: border-box;
}

.subgoal-name {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.subgoal-status {
  font-size: $font-size-xs;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  flex-shrink: 0;
}

.subgoal-info {
  font-size: $font-size-sm;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: $spacing-sm;
}

.subinfo-item {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-xs;
  width: 100%;
  box-sizing: border-box;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.sublabel {
  color: $text-secondary;
  width: 140rpx;
  flex-shrink: 0;
}

.subvalue {
  flex: 1;
  color: $text-primary;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.subgoal-progress-bar {
  width: 100%;
  height: 16rpx;
  background-color: $background-color;
  border-radius: 8rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.subprogress-fill {
  height: 100%;
  background: linear-gradient(90deg, $secondary-color, $primary-color);
  border-radius: 8rpx;
  transition: width 0.6s ease;
}

.no-subgoals {
  text-align: center;
  padding: $spacing-xl;
  color: $text-tertiary;
  font-size: $font-size-sm;
  margin-top: $spacing-base;
  border-top: 1rpx solid $border-color;
}

.info-item {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-sm;
  width: 100%;
  box-sizing: border-box;
  padding: $spacing-xs 0;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  color: $text-secondary;
  width: 160rpx;
  flex-shrink: 0;
}

.value {
  flex: 1;
  color: $text-primary;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0; // 防止Flexbox中文字溢出
}

/* 科目卡片样式 */
.subjects-card {
  margin-bottom: $spacing-base;
  width: 100%;
  box-sizing: border-box;
  background-color: $card-background;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-light;
  transition: all 0.3s ease;
}

.subjects-card:active {
  transform: scale(0.98);
  box-shadow: $shadow-heavy;
}

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
  width: 100%;
  box-sizing: border-box;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.subjects-list {
  margin-top: $spacing-sm;
  width: 100%;
  box-sizing: border-box;
}

/* 按钮组样式 */
.buttons-group {
  display: flex;
  gap: 10rpx; // 设置按钮之间的间距
}

.edit-btn {
  margin-left: 0; // 重置可能的默认左边距
  margin-right: 0; // 重置可能的默认右边距
  min-height: 64rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-size: $font-size-sm;
}

/* 科目项样式 */
.subject-item {
  padding: $spacing-base;
  border: 1rpx solid $border-color;
  border-radius: $border-radius-base;
  margin-bottom: $spacing-sm;
  width: 100%;
  box-sizing: border-box;
  background-color: $card-background;
  transition: all 0.3s ease;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.subject-item:active {
  background-color: $background-color;
}

.subject-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
  width: 100%;
  box-sizing: border-box;
}

.subject-name {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  word-wrap: break-word;
}

.subject-score {
  font-size: $font-size-sm;
  color: $text-secondary;
}

/* 进度条样式 */
.score-chart {
  width: 100%;
  height: 20rpx;
  background-color: $background-color;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: $spacing-sm;
  box-sizing: border-box;
  position: relative;
}

.chart-bar {
  height: 100%;
  background: linear-gradient(90deg, $primary-color, $secondary-color);
  border-radius: 10rpx;
  transition: width 0.6s ease;
}

.subject-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.current-score {
  font-size: $font-size-sm;
  color: $text-primary;
}

.progress-text {
  font-size: $font-size-sm;
  color: $primary-color;
  font-weight: bold;
}

/* 描述卡片样式 */
.description-card {
  margin-bottom: $spacing-lg;
  background-color: $card-background;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-light;
  transition: all 0.3s ease;
}

.description-card:active {
  transform: scale(0.98);
  box-shadow: $shadow-heavy;
}

.description {
  font-size: $font-size-base;
  color: $text-primary;
  line-height: 1.6;
  padding: $spacing-sm 0;
  word-wrap: break-word;
  word-break: break-word;
}

/* 关联计划列表样式 */
.plans-card {
  margin-bottom: $spacing-lg;
  background-color: $card-background;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-light;
  transition: all 0.3s ease;
}

.plans-card:active {
  transform: scale(0.98);
  box-shadow: $shadow-heavy;
}

.add-btn {
  min-height: 64rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-size: $font-size-sm;
  padding: 0 $spacing-base;
}

.plans-list {
  width: 100%;
  box-sizing: border-box;
}

.plan-item {
  padding: $spacing-base;
  border: 1rpx solid $border-color;
  border-radius: $border-radius-base;
  margin-bottom: $spacing-sm;
  width: 100%;
  box-sizing: border-box;
  background-color: $card-background;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.plan-item:active {
  background-color: $background-color;
  transform: scale(0.98);
}

.plan-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-xs;
  width: 100%;
  box-sizing: border-box;
}

.plan-name {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.plan-status {
  font-size: $font-size-xs;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  flex-shrink: 0;
}

.plan-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-xs;
  width: 100%;
  box-sizing: border-box;
  font-size: $font-size-xs;
  color: $text-secondary;
}

.plan-time {
  flex: 1;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.plan-progress {
  flex-shrink: 0;
}

.plan-progress-bar {
  width: 100%;
  height: 16rpx;
  background-color: $background-color;
  border-radius: 8rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, $success-color, $secondary-color);
  border-radius: 8rpx;
  transition: width 0.6s ease;
}

.empty-plans {
  text-align: center;
  padding: $spacing-xl;
  color: $text-tertiary;
  font-size: $font-size-sm;
}

/* 操作按钮样式 */
.action-buttons {
  margin-bottom: $spacing-lg;
  width: 100%;
  box-sizing: border-box;
}

/* 底部操作按钮样式 */
.bottom-actions {
  width: 100%;
  box-sizing: border-box;
  padding: $spacing-lg 0 $spacing-xl 0;
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
}

/* 主要按钮样式 */
.primary-btn {
  min-height: 64rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-size: $font-size-lg;
  font-weight: 500;
  border-radius: $border-radius-lg;
  background-color: $primary-color;
  color: white;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.primary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s;
}

.primary-btn:hover::before {
  left: 100%;
}

.primary-btn:active {
  background-color: rgba($primary-color, 0.9);
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

/* 辅助按钮组样式 */
.secondary-actions {
  display: flex;
  flex-direction: row;
  gap: $spacing-base;
  width: 100%;
  box-sizing: border-box;
}

.secondary-btn {
  flex: 1;
  min-height: 88rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: $font-size-base;
  border-radius: $border-radius-lg;
  border: 1px solid $border-color;
  background-color: white;
  color: $text-primary;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.secondary-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $background-color;
  opacity: 0;
  transition: opacity 0.3s;
}

.secondary-btn:active::after {
  opacity: 1;
}

.secondary-btn:active {
  transform: translateY(2rpx);
}

/* 成功按钮样式 */
.success-btn {
  min-height: 64rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-size: $font-size-lg;
  font-weight: 500;
  border-radius: $border-radius-lg;
  background-color: $success-color;
  color: white;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4rpx 12rpx rgba(73, 194, 163, 0.3);
  overflow: hidden;
  position: relative;
}

.success-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s;
}

.success-btn:hover::before {
  left: 100%;
}

.success-btn:active {
  background-color: rgba($success-color, 0.9);
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 6rpx rgba(73, 194, 163, 0.2);
}

/* 删除按钮样式 */
.delete-btn {
  min-height: 64rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-size: $font-size-base;
  border-radius: $border-radius-lg;
  background-color: $danger-color;
  color: white;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.delete-btn:active {
  background-color: rgba($danger-color, 0.9);
  transform: translateY(2rpx);
}

/* 图表卡片样式 */
.chart-card {
  margin-bottom: $spacing-base;
  width: 100%;
  box-sizing: border-box;
  background-color: $card-background;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-light;
  transition: all 0.3s ease;
}

.chart-card:active {
  transform: scale(0.98);
  box-shadow: $shadow-heavy;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .container {
    padding: $spacing-sm;
  }
  
  .goal-title {
    font-size: $font-size-base;
  }
  
  .card-title {
    font-size: $font-size-sm;
  }
  
  .edit-btn {
    min-height: 56rpx;
    height: 56rpx;
    line-height: 56rpx;
    font-size: $font-size-xs;
  }
  
  /* 响应式按钮样式 */
  .bottom-actions {
    gap: $spacing-base;
    padding: $spacing-base 0 $spacing-lg 0;
  }
  
  .primary-btn {
    min-height: 88rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: $font-size-base;
  }
  
  .secondary-btn {
    min-height: 76rpx;
    height: 76rpx;
    line-height: 76rpx;
    font-size: $font-size-sm;
  }
  
  .success-btn {
    min-height: 88rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: $font-size-base;
  }
  
  .delete-btn {
    min-height: 76rpx;
    height: 76rpx;
    line-height: 76rpx;
    font-size: $font-size-sm;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.goal-card,
.subjects-card,
.description-card,
.plans-card,
.chart-card {
  animation: fadeIn 0.5s ease-out;
}

/* 不同状态的颜色样式 */
.status-completed {
  background-color: rgba($success-color, 0.1);
  color: $success-color;
}

.status-pending {
  background-color: rgba($warning-color, 0.1);
  color: $warning-color;
}

.status-failed {
  background-color: rgba($danger-color, 0.1);
  color: $danger-color;
}
</style>